<script setup lang="ts">
import { MessageSender, MessageSenderType } from '@/common/enums/message-sender';
import { UserOutlined } from '@ant-design/icons-vue';
import { Avatar } from 'ant-design-vue';
import { type MessageItem } from './index';

interface Props {
  message: MessageItem
}
defineProps<Props>()
</script>

<template>

  <!-- :class="{
    'message-item--other': message.sender == MessageSender.Other,
    'message-item--self': message.sender == MessageSender.Self
  }" -->
  <div class="message-item" :class="`message-item--${MessageSenderType[message.sender]}`">
    <Avatar size="large" :src="message.avatar">
      <template #icon>
        <UserOutlined />
      </template>
    </Avatar>
    <div class="message-item-content" :class="{
      'item-end': message.sender == MessageSender.Self
    }">
      <span class="message-item-content-nickname">
        {{ message.nickname }}
      </span>
      <p class="message-item-content-text">
        {{ message.message }}
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.message {
  &-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;

    &--self {
      flex-direction: row-reverse;

      & p {
        align-self: flex-end;
      }
    }

    &--other {
      flex-direction: row;
    }

    &-content {
      display: flex;
      flex-direction: column;

      &-nickname {
        line-height: 30px;
      }

      &-text {
        max-width: max-content;
        padding: 8px;
        line-height: 26px;
        background-color: $educ-color-white;
        border-radius: 4px;
      }
    }


  }
}
</style>